<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webSocket</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.4.0/sockjs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>

<div>
    <button id="connect">连接</button>
    <button id="disconnect" disabled="disabled">断开</button>
    <label>用户名：</label>
    <input id="broadcastUser" type="text" value="35e1f71a-153e-4d5e-bf09-f48f11456a18"/>
    <label>服务器：</label>
    <input id="serverUrl" type="text" value="http://api.maas.com/api-video"/>
    <!--    <button id="talkBtn">登录订阅个人信息(点对点)</button>-->
</div>


<div>
    <h3>订阅（查看用户车辆轨迹信息，根据用户来广播）</h3>
    <label>主题:</label>
    <button id="subscribeBtn">订阅</button>
    <button id="unSubscribeBtn" disabled>退阅</button>
</div>

<div>
    <h3>订阅（查看用户车辆轨迹信息，根据subscribeId （单客户端）来广播</h3>
    <label>subscribeId:</label>
    <input id="subscribeId" type="text"/>
    <button id="subscribeBtn2">订阅</button>
    <button id="unSubscribeBtn2" disabled>退阅</button>
</div>


<div class="row">
    <div class="col-md-12">
        <h5 class="page-header" style="font-weight:bold">接收到的消息：</h5>
        <table class="table table-striped">
            <tbody id="information"></tbody>
        </table>
    </div>
</div>

</body>
<script>
    //stomp.js 用法参考
    // https://www.cnblogs.com/goloving/p/10746378.html
    // stomp 协议规范
    // https://www.cnblogs.com/davidwang456/p/4449428.html


    var stomp = null;
    var userCarSubscribe = null;
    var p2pSubscribe = null;

    // 点击连接
    $("#connect").click(function () {
        //$(function () {
        //1.http/https 协议形式连接，后台启用 withSokJS()
        //var url = "http://127.0.0.1:8080/ws"
        //var url = "http://127.0.0.1:8090/ws-stomp?token=" + $("#broadcastUser").val();
        var url = $("#serverUrl").val()+"/ws-stomp?access_token=" + $("#broadcastUser").val();
        var socket = new SockJS(url);
        stomp = Stomp.over(socket);

        stomp.heartbeat.outgoing = 25000; //若使用STOMP 1.1 版本，默认开启了心跳检测机制（默认值都是10000ms）
        stomp.heartbeat.incoming = 0; //客户端不从服务端接收心跳包,

        //2 ws/wss协议模式连接，后台 将withSokJS()注释掉
        //var url = "ws://127.0.0.1:8080/ws";
        //stomp = Stomp.client(url);
        let headers = {}
        //连接 这里可以传递token或者其他附加信息
        stomp.connect(headers, function (frame) {
            setConnect(true);
        });
    });

    // 断开连接
    $("#disconnect").click(function () {
        if (stomp != null) {
            stomp.disconnect();
        }
        setConnect(false);
    });

    //设置按钮
    function setConnect(connectStatus) {
        $("#connect").attr("disabled", connectStatus);
        $("#disconnect").attr("disabled", !connectStatus);
    }


    //订阅特殊的消息消息，相当于注册只执行一次
    $("#subscribeBtn").click(function () {
        var topic = "/user/queue/userCarMessage";
        //用户模式
        //自定义header 也可以重写id ,"id"=mysubid
        let headers = {"Custom-Subscribe-Topic": "car.user_message"}
        userCarSubscribe = stomp.subscribe(topic, function (res) {
            $("#information").append("<tr><td>" + res.body + "</td></tr>");
        }, headers);
        $("#unSubscribeBtn").attr("disabled", false);
        $("#subscribeBtn").attr("disabled", true);

    });

    $("#unSubscribeBtn").click(function () {
        userCarSubscribe.unsubscribe();
        $("#unSubscribeBtn").attr("disabled", true);
        $("#subscribeBtn").attr("disabled", false);
    });


    //订阅特殊的消息消息，相当于注册只执行一次
    $("#subscribeBtn2").click(function () {
        var subscribeId = $("#subscribeId").val();
        var queue = "/queue/p2pCarMessage/" + subscribeId;
        $("#information").append("<tr><td>订阅:" + queue + "！</td></tr>");

        let headers = {"Custom-Subscribe-Topic": "car.p2p_message", "id": subscribeId}

        p2pSubscribe = stomp.subscribe(queue, function (ares) {
            $("#information").append("<tr><td>" + ares.body + "</td></tr>");
        }, headers);

        $("#unSubscribeBtn2").attr("disabled", false);
        $("#subscribeBtn2").attr("disabled", true);

    });

    //订阅特殊的消息消息，相当于注册只执行一次
    $("#unSubscribeBtn2").click(function () {
        p2pSubscribe.unsubscribe();
        $("#unSubscribeBtn2").attr("disabled", true);
        $("#subscribeBtn2").attr("disabled", false);
    });


</script>
</html>